
<template>
  <div>
  <a-button @click="addUserModal" type="primary">新增用户</a-button>

    <a-modal v-model:visible="visible" title="新增用户" @ok="handleSubmit">

      <a-form :form="form" @submit="handleSubmit">

        <a-form-item v-bind="formItemLayout">
      <span slot="label">
        用户名&nbsp;
        <a-tooltip title="请确用户名有效性！">
          <a-icon type="question-circle-o" />
        </a-tooltip>
      </span>
          <a-input
              v-decorator="[
          'username',
          {
            rules: [{ required: true, message: '请一定要输入用户名!', whitespace: true }],
          },
        ]"
          />
        </a-form-item>

        <a-form-item v-bind="formItemLayout">
      <span slot="label">
        密码&nbsp;
        <a-tooltip title="请确保标题有效性！">
          <a-icon type="question-circle-o" />
        </a-tooltip>
      </span>
          <a-input
              v-decorator="[
          'password',
          {
            rules: [{ required: true, message: '请一定要输入密码!', whitespace: true }],
          },
        ]" type="password" placeholder="Password"
          />
        </a-form-item>

      </a-form>

    </a-modal>

  <a-table :columns="columns" :data-source="userList">

    <a slot="name" slot-scope="text">{{ text }}</a>
    <span slot="customTitle"><a-icon type="smile-o" /> Name</span>

    <span slot="action" slot-scope="text, record" >

      <a-popconfirm
          v-if="record.status=='正常'"
          title="您确定要禁用当前用户?"
          ok-text="Yes"
          cancel-text="No"
          @confirm="forbiddenUser(record)"
          @cancel="()=>{}"

      >
    <a>禁用用户</a>

    </a-popconfirm>


    <a-popconfirm
            v-if="record.status=='禁用'"
            title="您确定要恢复当前用户?"
            ok-text="Yes"
            cancel-text="No"
            @confirm="relieveForbiddenUser(record)"
            @cancel="()=>{}"

    >
    <a>恢复用户</a>
    </a-popconfirm>


    </span>

  </a-table>
  </div>
</template>

<script>
import {message} from "ant-design-vue";

const columns = [
  {
    title:"用户名",
    dataIndex: 'userName',
    key: 'userName',
  },
  {
    title:"账户状态",
    dataIndex: 'status',
    key: 'status',
  },
  {
    title: '操作',
    key: 'action',
    scopedSlots: { customRender: 'action' },
  },
];




export default ({
  data() {
    return {
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 8 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },

      columns,
      userList:[],
      visible:false,
    }
  },
  beforeCreate() {

    this.form = this.$form.createForm(this, { name: 'register' });



    this.$http({
      method: 'get',
      url: 'http://localhost:18082/user/getuserall',
      headers:{
        user:localStorage.getItem("user"),
      }
    }).then((e)=>{
      console.log(e);
      if(e.data.status){
        this.userList=e.data.data;
      }



    })


  },
  mounted() {

  },
  methods: {
    handleSubmit(e) {

      e.preventDefault();
      this.form.validateFieldsAndScroll((err, values) => {
        console.log(values)
        if (!err) {



          this.$http({
            method: 'post',
            url: 'http://localhost:18082/user/adduser',
            headers:{
              user:localStorage.getItem("user"),
            },
            data:{
                userName:values.username,
                password:values.password
            }
          }).then((e)=>{


            if(e.data.status==true){
              message.info("添加成功",3);
              this.visible=false;

              this.$http({
                method: 'get',
                url: 'http://localhost:18082/user/getuserall',
                headers:{
                  user:localStorage.getItem("user"),
                }
              }).then((e)=>{
                console.log(e);
                if(e.data.status){
                  this.userList=e.data.data;
                }
              })

            }else{
              message.error("添加失败,请注意用户名不能重复",3);
            }

          })



        }
      });
    },
    addUserModal(){
      this.visible=true;
    },
    handleOk(e){

    },
   addUser(e){


   },
   forbiddenUser(e){

     this.$http({
       method: 'post',
       url: 'http://localhost:18082/user/forbiddenuser',
       headers:{
         user:localStorage.getItem("user"),
       },
       data:e
     }).then((e)=>{

        if(e.data.status){
          message.info("禁用成功",3);

          this.$http({
            method: 'get',
            url: 'http://localhost:18082/user/getuserall',
            headers:{
              user:localStorage.getItem("user"),
            }
          }).then((e)=> {

            if (e.data.status) {
              this.userList = e.data.data;
            }
          })


        }else{
          message.error("禁用失败",3);
        }


     })

   },
   relieveForbiddenUser(e){

     this.$http({
       method: 'post',
       url: 'http://localhost:18082/user/relieveforbiddenuser',
       headers:{
         user:localStorage.getItem("user"),
       },
       data:e
     }).then((e)=>{

       if(e.data.status){
         message.info("禁用成功",3);

         this.$http({
           method: 'get',
           url: 'http://localhost:18082/user/getuserall',
           headers:{
             user:localStorage.getItem("user"),
           }
         }).then((e)=> {

           if (e.data.status) {
             this.userList = e.data.data;
           }
         })


       }else{
         message.error("禁用失败",3);
       }


     })

   }

  },
})

</script>

